<template>
    <div class="person">
        <h1>中国</h1>
        <!-- ref可以用于唯一标识vue中的元素，类似于原来的id，但id可能在多个文件中同时出现而失效，ref则不会 -->
        <h2 ref="h2">山东</h2>
        <h3>济南</h3>
        <button @click="printH2">点我打印H2标签</button>

    </div>
</template>


<script lang="ts" setup name="Person">
    
    import {ref, defineExpose} from 'vue'

    // 使用ref接收在html中标记为ref的元素
    let h2 = ref()

    function printH2() {
        console.log(h2.value)
    }  
    
    // 定义一些元素，用于测试打印组件标签(非HTML标签)的访问权限
    let a = ref(0);
    let b = ref(1);
    let c = ref(2);
    // 使用defineExpose使得父组件可以访问到当前组件的元素
    defineExpose({a_:a, b})

</script>

<!-- 这里的scoped标签用于限定当前文件的style样式只会作用于当前文件，不会作用于其他文件 -->
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>